<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--[if lt IE 9]><!-->
		<script src="http://code.jquery.com/jquery-1.11.3.min.js "></script>
		<!--<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>
		<!--<![endif]-->
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
		</script>
		<script>
			$(document).ready(function() {
				$("li.start").next().css({
					"border": "2px solid red"
				});
				$("li.start").nextAll().css({
					"color": "blue"
				});
				$("li.start").nextUntil("li.stop").css({
					"background-color": "orange"
				});
				$("li.start").prev().css({"border":"2px solid blue"});
				$("li.start").prevAll().css({"color":"red"});
				$("li.start").prevUntil("li.stop").css({"background-color": "pink"});
				$("li.start").siblings().css({"text-decoration":"line-through"});
			});
		</script>
	</head>

	<body>
		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li class="stop">li (类名为"stop"的兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个的兄弟节点)</li>
				<li>li (类名为“star”的li节点的下一个兄弟节点)</li>
				<li>li (类名为“star”的li节点的下一个兄弟节点)</li>
				<li class="stop">li (类名为"stop"的兄弟节点)</li>
			</ul>
		</div>
	</body>

</html>